<!-- 规则 -->
<template>
  <div>
    <ql-space>
      <ql-card>
        <template #header>
          <el-button
            v-btn:create="$route"
            type="primary"
            @click="formVisible = true"
          >
            创建规则
          </el-button>
        </template>
        <el-table
          v-loading="listLoading"
          :data="list"
          row-key="menuId"
        >
          <el-table-column
            prop="menuId"
            label="ID"
          />
          <el-table-column
            prop="name"
            label="名称"
          >
            <template #default="{ row }">
              <div class="flex items-center">
                <app-icon
                  v-if="row.icon"
                  :icon="row.icon"
                />
                {{ row.name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="btn"
            label="按钮权限"
          />
          <el-table-column
            prop="menuPath"
            label="页面路由"
          />
          <el-table-column
            prop="perms"
            label="前端权限"
          />
          <el-table-column
            width="260"
            label="操作"
          >
            <template #default="scope">
              <el-button
                v-if="scope.row.type !== 2"
                v-btn:add="$route"
                text
                bg
                type="primary"
                @click="handleCreate(scope.row.menuId)"
              >
                添加规则
              </el-button>
              <el-button
                v-btn:edit="$route"
                text
                bg
                type="primary"
                @click="handleUpdate(scope.row.menuId)"
              >
                编辑
              </el-button>
              <el-popconfirm
                title="确认删除吗？"
                @confirm="handleDelete(scope.row.menuId)"
              >
                <template #reference>
                  <el-button
                    v-btn:delete="$route"
                    text
                    bg
                    type="primary"
                  >
                    删除
                  </el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </ql-card>
    </ql-space>
    <RuleForm
      v-model="formVisible"
      v-model:pid="pid"
      v-model:rule-id="ruleId"
      @success="handleFormSuccess"
    />
  </div>
</template>
<script>
import { menuList, menuDelete } from '@/api/setting/rule'
import RuleForm from './components/RuleForm.vue'
export default {
  name: 'IndexPermissionRule'
}
</script>
<script setup>

// 基础数据信息
const listLoading = ref(false)

const list = ref([])

onMounted(() => {
  loadList()
})

// 获取列表
const loadList = async () => {
  listLoading.value = true
  const data = await menuList().finally(() => {
    listLoading.value = false
  })

  list.value = data
}

// 添加规则
const formVisible = ref(false)
const pid = ref(null)
const handleCreate = (id) => {
  pid.value = id
  formVisible.value = true
}

// 编辑规则
const ruleId = ref(null)
const handleUpdate = (id) => {
  ruleId.value = id
  formVisible.value = true
}

// 弹框关闭
const handleFormSuccess = () => {
  formVisible.value = false
  loadList()
}

// 删除
const handleDelete = async (id) => {
  await menuDelete({ menuId: id })
  ElMessage.success('删除成功')
  loadList()
}

</script>

<style scoped lang='scss'>
</style>
